<template>
  <div class="login">
    <div class="loginTitle">餐厨废弃油脂收运处理精细化管理平台</div>
    <!-- <div class="loginTitle">智慧环卫系统</div> -->
    <!-- <div class="loginTitle">远航环卫作业公司智慧环卫平台</div> -->
    <!-- <div class="loginTitle">佳好佳智慧环卫平台</div> -->
    <img src="../../assets/img/login.jpg" alt />
    <div id="logo" class="logo">
      <img
        style="width: 80%; height: 80%; margin-top: 60px;"
        src="../../assets/img/loginImage.png"
        alt
      />
    </div>
    <div class="divSelect">
      <el-row :gutter="0">
        <el-col class="blue1" v-if='(menuShowList["001"])'>
          <div class="grid-content" @click="turnVehicle()">
            道路
            <br />机扫
          </div>
          <!-- <img src="@/assets/此图片已经删除.jpg" alt /> -->
        </el-col>
        <el-col class="blue2" v-if='(menuShowList["002"])'>
          <div class="grid-content" @click="turnWorker()">
            人工
            <br />保洁
          </div>
        </el-col>
        <!-- <el-col class="blue3" v-if='(menuShowList["008"])'>
          <div class="grid-content">
            以克
            <br />论净
          </div>
        </el-col> -->
        <el-col class="blue3" v-if='(menuShowList["008"])'>
          <div class="grid-content" >
            以克
            <br />论净
          </div>
        </el-col>
        <el-col class="blue1" v-if='(menuShowList["004"])'>
          <div class="grid-content" @click="turnWC()">
            公厕
            <br />维保
          </div>
        </el-col>
        <el-col class="blue2" v-if='(menuShowList["012"])'>
          <div class="grid-content" @click="turnFacility()">
            设施
            <br />管理
          </div>
        </el-col>
        <el-col class="blue3" v-if='(menuShowList["016"])'>
          <div class="grid-content" @click="turnWasteOil()">
            废弃
            <br />油脂
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="0" style="position: relative; top: -50px; left: 90px">
        
        <el-col class="blue2" v-if='(menuShowList["003"])'>
          <div class="grid-content" @click="turnRubbish()">
            垃圾
            <br />收运
          </div>
        </el-col>
        <el-col class="blue2" v-if='(menuShowList["009"])'>
          <div class="grid-content" @click="turnCanChuServe()">
            餐厨
            <br />垃圾
          </div>
        </el-col>
        <el-col class="blue3" v-if='(menuShowList["010"])'>
          <div class="grid-content" @click="turnLaJiJiFenServe()">
            垃圾
            <br />分类
          </div>
        </el-col>
        <el-col class="blue1" v-if='(menuShowList["013"])'>
          <div class="grid-content" @click="turnJianDuAssessment()">
            监督
            <br />考核
          </div>
          <!-- <img src="@/assets/此图片已经删除.jpg" alt /> -->
        </el-col>
        
        <el-col class="blue3" v-if='(menuShowList["015"])'>
          <div class="grid-content" @click="turnHumanisticConcern()">
            人文
            <br />关怀
          </div>
        </el-col>
        
      </el-row>
      <el-row :gutter="0" style="position: relative; top: -100px">
        <el-col class="blue3" v-if='(menuShowList["005"])'>
          <div class="grid-content" @click="turnCarServe()">
            车务
            <br />机务
          </div>
        </el-col>
        <el-col class="blue1" v-if='(menuShowList["006"])'>
          <div class="grid-content" @click="turnComprehensiveServe()">
            综合
            <br />显示
          </div>
        </el-col>
        <el-col class="blue1" v-if='(menuShowList["011"])'>
          <div class="grid-content">
            渣土
            <br />收运
          </div>
        </el-col>
        <el-col class="blue3" v-if='(menuShowList["014"])'>
          <div class="grid-content" @click="turnFeedBack()">
            应急
            <br />事件
          </div>
          <!-- <img src="@/assets/此图片已经删除.jpg" alt /> -->
        </el-col>
        <el-col class="blue2" v-if='(menuShowList["007"])'>
          <div class="grid-content" @click="turnAccountManage()">
            账户
            <br />角色
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 用户名下拉菜单 -->
    <el-form class="user-name" style="width: 20%">
      <!-- <el-form-item label="选择分组："> -->
      <el-form-item>
        <el-dropdown split-button type="primary" @command="handleCommand">
          {{ username }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in userList"
              :key="item.CLIENT_NO"
              :command="{ value: item.CLIENT_NO, label: item.USERNAME }"
              >{{ item.USERNAME }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <!-- [{"CLIENT_NO":"0000009","USERNAME":"博德尔公司","UID":"dlhw","PWD":"dlhw"},{"CLIENT_NO":"0000001","USERNAME":"东丽东片区","UID":"dldp","PWD":"dldp"}] -->
    <!-- <el-dropdown split-button type="primary" @command="handleCommand" class="user-name">
      {{ username }}
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="{value:'0000009',label:'博德尔公司',flag:1}">博德尔公司</el-dropdown-item>
        <el-dropdown-item :command="{value:'0000001',label:'东丽东片区',flag:2}">东丽东片区</el-dropdown-item>
        <el-dropdown-item :command="{value:'0',label:'',flag:0}">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
    <!-- <div class="pageDown"></div> -->
  </div>
</template>
<script>
import Astrict from '@/utils/exportExcel/astrict.js'
  export default {
    data() {
      return {
        username: '',
        userList: [],
        menuShowList: {
          "001": false,
          "002": false,
          "003": false,
          "004": false,
          "005": false,
          "006": false,
          "007": false,
          "008": false,
          "009": false,
          "010": false,
          "011": false,
          "012": false,
          "013": false,
          "014": false,
          "015": false,
          "016": false,
        },

        
      }
    },
    mounted() {
      this.getInfoList()
      var div1 = document.getElementById('logo')
      var height = (div1.offsetHeight * 71) / 64
      div1.style.width = height + 'px'
      // Astrict() // 登出超时判断
    },
    created() {
      this.getRoleList()
    },
    methods: {
      async getInfoList() {
        var url =
          'Role/GetLoginInfo?UserID=' +
          localStorage.getItem('LOGIN_NAME')
        let { data } = await this.$Http.get(url)
        // if (data.length > 0) {
        //   localStorage.setItem('CLIENT_NO', data[0].CLIENT_NO)
        //   localStorage.setItem('USERNAME', data[0].USERNAME)
        //   this.username = data[0].USERNAME
        // }
        this.userList = data
        var screeningData = data.filter(item => item.CLIENT_NO === localStorage.getItem('CLIENT_NO_LOGIN'))
        if (screeningData.length == 0) {
          this.userList.push({
            CLIENT_NO: localStorage.getItem('CLIENT_NO_LOGIN'),
            // USERNAME: localStorage.getItem('USERNAME_LOGIN')
            USERNAME: '全部项目'
          })
        }
        if (localStorage.getItem('CLIENT_NO') === '00000') {
          this.username = '全部项目'
        }else{
          this.username = localStorage.getItem('USERNAME')
        }
        this.userList.push(
          // {
          //   CLIENT_NO: localStorage.getItem('CLIENT_NO_LOGIN'),
          //   USERNAME: '全部'
          // },
          { CLIENT_NO: '0', USERNAME: '退出登录' }
        )
      },
      handleCommand(command) {
        // this.$message('click on item ' + command);
        if (command.value === '0') {
          localStorage.removeItem('CLIENT_NO')
          localStorage.removeItem('USERNAME')
          this.$router.push('/login')
        } else {
          this.username = command.label
          localStorage.setItem('CLIENT_NO', command.value)
          localStorage.setItem('USERNAME', command.label)
        }
      },
      turnComprehensiveServe() {
        console.log('turnComprehensiveServe')
        localStorage.setItem('CurrentService', '006')
        this.$router.push({
          path: '/ComprehensiveHome'
        })
      },
      turnWC() {
        console.log('turnWC')
        localStorage.setItem('CurrentService', '004')
        this.$router.push({
          path: '/WCHome'
        })
      },
      turnVehicle() {
        console.log('turnVehicle')
        localStorage.setItem('CurrentService', '001')
        this.$router.push({
          path: '/VehicleHome'
        })
      },
      turnRubbish() {
        console.log('turnRubbish')
        localStorage.setItem('CurrentService', '003')
        this.$router.push({
          path: '/RubbishHome'
        })
      },
      turnWorker() {
        console.log('turnWorker')
        localStorage.setItem('CurrentService', '002')
        this.$router.push({
          path: '/WorkerHome'
        })
      },
      turnCarServe() {
        console.log('turnCarServe')
        localStorage.setItem('CurrentService', '005')
        this.$router.push({
          path: '/CarServeHome'
        })
      },
      turnCanChuServe() {
        window.open('http://111.160.78.62:4464/#/login?bh&bh')
      },
      turnLaJiJiFenServe() {
        // window.open('http://111.160.78.62:4468/#/login')
        window.open('http://111.160.78.62:4468/#/login?admin&123456')
      },
      
      turnJianDuAssessment() {
        console.log('turnJianDuAssessment')
        localStorage.setItem('CurrentService', '013')
        this.$router.push({
          path: '/AssessmentItems'
        })
      },
      async submitForm () {
        // console.log(localStorage.getItem('LOGIN_Password'))
        var url =  'http://111.160.78.62:5578/GarbagePointsFJApi/BasicData/GetLoginUserApi?Username=admin&password=123456'
        this.$axios({
          url: url,
          method: 'get'
        }).then(res => {
          console.log(res.data)
          if (res.data.IsSucess) {
            window.open('http://111.160.78.62:4468/#/dashboard')
          } 
        })
      },
      turnAccountManage() {
        console.log('turnAccountManage')
        localStorage.setItem('CurrentService', '007')
        this.$router.push({
          path: '/AccountManage'
        })
      },
      // 监督考核
      turnSupervisionAssessment() {
        console.log('turnSupervisionAssessment')
        localStorage.setItem('CurrentService', '013')
        this.$router.push({
          path: '/AssessmentItems'
        })
      },
      // 设施管理
      turnFacility() {
        console.log('turnFacility')
        localStorage.setItem('CurrentService', '012')
        this.$router.push({
          path: '/PlaceWaterHome'
        })
      },
      //应急事件
      turnFeedBack() {
        console.log('turnFeedBack')
        localStorage.setItem('CurrentService', '014')
        this.$router.push({
          path: '/QueryWorkFeedback'
        })
      },
      // 人文关怀
      turnHumanisticConcern() {
        console.log('turnHumanisticConcern')
        localStorage.setItem('CurrentService', '015')
        this.$router.push({
          path: '/WorkerAlert'
        })
      },
      turnWasteOil() {
        console.log('turnWasteOil')
        localStorage.setItem('CurrentService', '016')
        this.$router.push({
          path: '/RubbishHome'
        })
      },
      // 获取菜单列表
      async getRoleList() {
        const params = {
          userName: localStorage.getItem('LOGIN_NAME')
        }
        const { data } = await this.$Http.get('Role/GetMenuInfoList', {
          params
        })
        
        this.menuData = data
        console.log(this.menuData)
        data.filter((item) => {
          this.menuShowList[item.ID] = true
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .login {
    width: 100%;
    height: 100%;
  }
  /deep/.el-form-item__label {
    line-height: 50px;
    font-size: 20px;
    width: 7.813vw;
  }
  .loginTitle {
    /* margin: 1em 0 0.5em 0; */
    font-weight: 600;
    /* text-transform: uppercase; */
    color: #007acc;
    /* font-style: italic; */
    /* font-family: 'Josefin Sans', sans-serif; */
    font-size: 45px;
    line-height: 54px;
    /* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
    text-align: center;
    top: 10%;
    width: 100%;
    position: absolute;
    z-index: 2;
  }
  .divSelect {
    padding-top: 50px;
    // padding-left: calc(~'50% - 550px');//左边是一半，100%-150【el-col的宽】*6【一行6个el-col】-40【el-col的margin-left + margin-right】*5【el-col的间隔数】
    // padding-left: 45%;
    top: 20%;
    right: 10%;
    // width: 400%;
    // height: 40%;
    position: absolute;
  }
  .login img {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    width: 180px;
    height: 190px;

    margin-left: 10px;
  }
  .blue1 {
    background: url(../../assets/img/Menu/blue1.png) no-repeat;
    background-size: 100% 100%;
  }
  .blue2 {
    background: url(../../assets/img/Menu/blue2.png) no-repeat;
    background-size: 100% 100%;
  }
  .blue3 {
    background: url(../../assets/img/Menu/blue3.png) no-repeat;
    background-size: 100% 100%;
  }
  .grid-content {
    padding-top: 42px;
    width: 180px;
    height: 190px;
    text-align: center;
    font-size: 38px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  .user-name {
    position: absolute;
    right: -3.646vw;
    top: 11%;
    z-index: 100;
  }
  .logo {
    position: absolute;
    // width: 60%;
    height: 60%;
    left: 5%;
    top: 20%;
    bottom: 20%;
    // background:url(../../assets/img/loginImage.png);
  }
</style>
